<template>
  <div class="login-page">
    <canvas-com></canvas-com>
    <div class="loginForm">
      <p>
        <img src="../../assets/images/loading2.gif" />
        <a>Shack-Shop后台管理系统</a>
      </p>
      <!-- status-icon提交后提示失败还是成功的图标
      ref是dom名称
      model绑定这个要验证的表单，在最后提交按钮要写成参数
      rules是验证的规则 -->
      <el-form 
      status-icon 
      ref="form" 
      :model="form" 
      :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="form.account" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" v-model="form.pwd" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm('form')" type="primary" :loading="isLogin" style="width:100%;">{{isLogin?'登录中...':'登录'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入Vuex中的mapGetters 辅助函数 ，帮助快速的将store中的getters映射到局部组件的计算属性中
import { mapGetters , mapMutations , mapActions } from 'vuex'
import CanvasCom from "../../components/canvascom";
export default {
  data() {
    // username的验证
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空!"));
      }
      setTimeout(() => {
        callback();
      }, 100);
    };

    // password的验证
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不能为空!"));
      }
      setTimeout(() => {
        callback();
      }, 100);
    };
    return {
      isLogin:false,
      form: {
        account: 'admin',
        pwd: '123456'
      },
      rules: {
        account: [
          {
            validator: validateUsername,
            required: true,
            message: "请输入用户名 ",
            trigger: "blur"
          },
          { min: 1, max: 16, message: "长度在 5 到 16 个字符", trigger: "blur" }
        ],
        pwd: [
          {
            validator: validatePassword,
            required: true,
            message: "请输入密码 ",
            trigger: "blur"
          },
          {
            min: 6,
            max: 18,
            message: "密码长度必须是6-18个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.enterLoginPage()
  },
  mounted() {
  },
  methods: {
    teacherLock(){
        // 老师关闭接口用这个
        // this.$router.push({
        //   path: '/dashboard'
        // })
        // this.$message({
        //   type: 'warning',
        //   message: '后端关闭了接口，直接调试跳转，开了网络之后，改回元信息，将这条跳转删除'
        // })
        // console.log('后端关闭了接口')
    },
    ...mapActions('user',[
      // 引入映射store中的saveUserInfo方法（存储数据）
      'saveUserInfo'
    ]),
    ...mapMutations('user',[
      // enterLoginPage是进入login页面的操作
      'enterLoginPage',
      'leaveLoginPage'
    ]),
    submitForm(formName) {
      this.teacherLock()
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isLogin = true;
          this.$message({
            type: "success",
            message: "表单验证成功,正在向后台验证用户信息..."
          });
          // console.log(this.form)
          this.$http.login(this.form).then(res => {
            //调用element中的一个提示组件 - 登录成功提示
            console.log(res.data.data)
            if (res) {
              this.$message({
                type: "success",
                message: "登录成功！"
              });

              //登录成功调用saveUserInfo方法存储用户信息后跳转(编程式导航)
              this.saveUserInfo(res.data.data).then(res => {
                this.$router.push({
                    path: '/'
                })
              })
            }
            this.isLogin = false;
          }).catch(err =>{
            this.isLogin = false;
          });
        } else {
          this.$message({
            type: "error",
            message: "表单验证失败,请检查用户名和密码..."
          });
          return false;
        }
      });
    }
  },
  computed: {
    ...mapGetters('user',[
      'getLogin'
    ])
  },
  components: {
    CanvasCom
  },
  beforeRouteLeave (to, from, next) {
    // console.log(this)
    this.leaveLoginPage()
    next()
  },
};
</script>

<style scoped lang="less">
.login-page {
  width: 100vw;
  height: 100vh;
  // background:#ff3c3c;
}
.content{
  width: 100% !important;
}
.loginForm {
  // width:
  position: fixed;
  width: 284px;
  height: 384px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 2px 0px #f4f4f4;
  right: 16%;
  top: 80px;
  padding: 16px;
  opacity:0;
  animation:fadeIns 2s linear 0.8s forwards;
  p {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 40px;
    img {
      width: 50%;
      margin: 20px 0;
    }
    a {
      display: inline-block;
    }
  }
}

@keyframes fadeIns{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
</style>
